<!--  -->
<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <div id="main" style="width: 100%; height: 400px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "",
  data: function () {
    return {
      myChart: {},
      option: {},
      oldata: {
        status: 1,
        type: "data",
        x: [1612792000, 1612793802, 1612795599, 1612797399, 1612799199],
        y: [120, 240, 280, 50, 100],
      },
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.myChart = this.$echarts.init(document.getElementById("main"));
    this.updateEcharts();
  },

  methods: {
    updateEcharts() {
      // 指定图表的配置项和数据
      this.option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: this.oldata.x,
        },
        yAxis: {
          scale: true,
          minInterval: 1,
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: this.oldata.y,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped></style>
